<template>
  <el-dialog :title="'课件播放'" :visible="visible" :close-on-click-modal="false" width="920px" @close="close">
    <div>
      <video-player
        class="vjs-custom-skin"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"/>
    </div>
  </el-dialog>

</template>

<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'

export default {
  name: 'PlayerVideoDialog',
  components: {
    videoPlayer
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    videoUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        muted: true,
        language: 'en',
        height: 500,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: []
      }
    }
  },
  mounted() {
    this.playerOptions.sources = [
      {
        type: 'video/mp4',
        src: this.videoUrl
      }
    ]
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">

/deep/ {
  .vjs-big-play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);

  }
}
.vjs-custom-skin{
	width: 100%;
}

</style>
